<template>
    <div>
        <router-view></router-view>
        <div class="box">
            <ul>
                <router-link to="home" active-class="active">
                    <li>
                        <el-icon>
                            <House />
                        </el-icon>
                    </li>
                </router-link>
                <router-link to="search" active-class="active">
                    <li>
                        <el-icon>
                            <Search />
                        </el-icon>
                    </li>
                </router-link>
                <router-link to="add" active-class="active">
                    <li>
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </li>
                </router-link>
                <router-link to="server" active-class="active">
                    <li>
                        <el-icon>
                            <ChatSquare />
                        </el-icon>
                    </li>
                </router-link>
                <router-link to="setting" active-class="active">
                    <li>
                        <el-icon>
                            <User />
                        </el-icon>
                    </li>
                </router-link>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.box {
    width: 100vw;
    height: 84px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 11;

    ul {
        display: flex;
        width: 100%;
        height: 100%;
        background-color: #FFFFFF;
        border-top: 2px solid #ccc;
        justify-content: space-around;
        align-items: center;

        li {
            width: 70px;
            height: 40px;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .active {
            background-color: #3498db;
            border-radius: 20px;
            /* 修改背景色以高亮当前项 */
        }
    }
}

// router-view {
//     padding-bottom: 84px;
//     /* 确保内容不会被导航栏遮挡 */
// }</style>